<template>
    <div class="BG">
        <canvas ref="can" width="90" height="110" class="canvas"></canvas>
        <img :src="src" alt="">
    </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import TestData from './test.json'
import getTwoPointAngle from './Test'

const can = ref<HTMLCanvasElement>();
const src = ref('');

const A2CA = function (angle: number) {
    return (-90 + angle) / 180 * Math.PI
}

onMounted(() => {
    if (can.value) {
        const ctx: CanvasRenderingContext2D | null = can.value.getContext('2d');

        var angle = 180;

        if (ctx) {
            ctx.beginPath();
            ctx.moveTo(32, 0);
            ctx.lineTo(40, 10);
            ctx.lineTo(23, 10);
            ctx.lineTo(32, 0);
            ctx.lineTo(32, 78);
            ctx.fillStyle = 'red';
            ctx.fill()
            ctx.strokeStyle = 'red';
            ctx.stroke()
            ctx.closePath();
            ctx.beginPath();
            ctx.arc(32, 78, 30, A2CA(0), A2CA(angle));
            ctx.strokeStyle = 'red';
            ctx.lineWidth = 1;
            ctx.stroke();

            ctx.font = "10px Microsoft YaHei"

            ctx.beginPath();
            var options = ctx.measureText(parseInt(angle + '') + '度');
            ctx.rect(50, 45, options.width + 4, 16);
            ctx.rect(35, 13, 12, 16);
            ctx.strokeStyle = 'yellow';
            ctx.stroke();
            ctx.fillStyle = '#fff';
            ctx.fill()

            ctx.textBaseline = 'top';
            ctx.fillStyle = 'red';
            ctx.fillText(parseInt(angle + '') + '度', 50 + 2, 45 + 3)
            ctx.fillStyle = 'blue';
            ctx.fillText('N', 35 + 2, 13 + 4)


            can.value.toBlob((res) => {
                if (res) {
                    var url = window.URL.createObjectURL(res);
                    src.value = url
                }
            })


        }







    }

})


console.log(TestData);

/*
 * 弧度转换为角度
 */
function radiansToDegrees(radians: any) {
    const degrees = radians % (2 * Math.PI);
    return degrees * 180 / Math.PI;
}
/*
 * 计算两点对于正北方向的朝向角度 [0,360]
 * @param {*} start format:{'latitude': 30, 'longitude': 120 }
 * @param {*} end
 */
function bearing(start: any, end: any) {
    let rad = Math.PI / 180,
        lat1 = start.latitude * rad,
        lat2 = end.latitude * rad,
        lon1 = start.longitude * rad,
        lon2 = end.longitude * rad;
    const a = Math.sin(lon2 - lon1) * Math.cos(lat2);
    const b = Math.cos(lat1) * Math.sin(lat2) - Math.sin(lat1) * Math.cos(lat2) * Math.cos(lon2 - lon1);
    var angle = radiansToDegrees(Math.atan2(a, b));
    return angle < 0 ? (180 + Math.abs(180 + angle)) : angle
}

var _mapping: any = {};

for (let i = 0; i < TestData.RetObject.lsStatBase.length; i++) {
    const element = TestData.RetObject.lsStatBase[i];
    _mapping[element.StationGuid] = element;
}

for (let i = 0; i < TestData.RetObject.lsLinkRelation.length; i++) {
    const element = TestData.RetObject.lsLinkRelation[i];
    var Star = _mapping[element.FStationGuid];
    var End = _mapping[element.TStationGuid];

    var A = getTwoPointAngle([Star.StatLa, Star.StatLg], [End.StatLa, End.StatLg]);

    var B = getTwoPointAngle([End.StatLa, End.StatLg], [Star.StatLa, Star.StatLg]);

    console.log(A, B);




    // console.log('正',);
    // console.log('反',);

}





</script>
<style lang="less" scoped>
.canvas {
    width: 90px;
    height: 110px;
    // background-color: #faa;
}

.BG {
    width: 100%;
    height: 100%;
    background-color: #000;
}
</style>